<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <!-- img引入外部图片，img是一个自结束标签
     src+外部图片路径
     img是替换元素（基于块元素和行内元素间、具有两种元素的特点）
   
     alt-对图片的描述。默认情况下不显示，某些浏览器在图片无法加载下显示
     搜索引擎会根据alt中的内容识别图片，若不写图片将不会被搜索引擎所收录
     
    -->
    <!-- 
width--图片的宽度（单位是像素）
height--图片的高度
.宽度和高度中如果只修改一个，另一个会等比例缩放

注意：一般情况在pc端，不建议改图片大小/需要多大就裁剪多大
但是在移动端，经常要缩放（主要是大图放小）

     -->
    <img width="400" src="./m/5e2156b3a5476.jpg" alt="">
    <img width="400"
        src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2420312182,3571875601&fm=26&gp=0.jpg" alt="">

    <!-- 图片的格式
    jpg(jpeg)
    -支持的颜色多。不支持透明度，不支持动图
    .一般用来显示照片（可压缩）
    gif
    -支持的颜色少，支持简单透明度，支持动图
    .颜色单一的图片，动图
    png
    -支持的颜色丰富，支持透明度，不支持动图
    .颜色丰富，复杂的动图（网页）
    webp
    -谷歌新推出，专门用来表示网页中图片的格式，具备了其他图片格式的所有优点（基本上完美）
    缺点：兼容性不好，老版本浏览器不支持


    base64
    -将图片进行base64编码，可以直接将图片转成字符，通过字符的形式来引入
    .一般都是需要和网页一起加载的图片，才会使用。不会出现时间差（不会再发送请求）



    效果一样，用小的
    效果不一样，用好的（效果和大小）

    
    -->
    <img width="400"
        src=""
        alt="">
</body>

</html>